<template>
    <div>
        <mj-title type="h2" title="Select 选择器"></mj-title>
        <div class="page-desc">使用模拟的增强下拉选择器来代替浏览器原生的选择器。</div>
        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="flex">
                    <div style="width:200px;">
                        <mj-select :option="options" v-model="selectValue4.value" placeholder="请选择" @on-change="onChange" transfer></mj-select>
                    </div>
                    <mj-button type="primary" class="ml10" @click="load1">动态加载数据</mj-button>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-select :option="options" v-model="selectValue1" placeholder="请选择" @onChange="onChange" transfer>&lt;/mj-select>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                    options: [{
                                        value: '黄金糕',
                                        label: '黄金糕'
                                    }, {
                                        value: '双皮奶',
                                        label: '双皮奶',
                                        disabled: true
                                    }, {
                                        value: '蚵仔煎',
                                        label: '蚵仔煎'
                                    }, {
                                        value: '龙须面',
                                        label: '龙须面'
                                    }, {
                                        value: '北京烤鸭',
                                        label: '北京烤鸭'
                                    }],
                                    selectValue1: '',
                                }
                            },
                            methods: {
                                onChange(item) {
                                    console.log(item)
                                },
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="禁用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form label-width="50px">
                    <mj-form-item label="禁用">
                        <mj-switch v-model="selectDisabled"></mj-switch>
                    </mj-form-item>
                </mj-form>
                <div style="width:200px;">
                    <mj-select :option="options" placeholder="请选择" :disabled="selectDisabled"></mj-select>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-form label-width="50px">
                            &lt;mj-form-item label="禁用">
                                &lt;mj-switch v-model="selectDisabled">&lt;/mj-switch>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                        &lt;mj-select :option="options" placeholder="请选择" disabled>&lt;/mj-select>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                   options: [{
                                        value: '黄金糕',
                                        label: '黄金糕'
                                    }, {
                                        value: '双皮奶',
                                        label: '双皮奶',
                                        disabled: true
                                    }, {
                                        value: '蚵仔煎',
                                        label: '蚵仔煎'
                                    }, {
                                        value: '龙须面',
                                        label: '龙须面'
                                    }, {
                                        value: '北京烤鸭',
                                        label: '北京烤鸭'
                                    }],
                                    selectDisabled:true,
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="多选"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb10">{{selectValue2}}</div>
                <div class="flex">
                    <div style="width:300px;">
                        <mj-select show-search :option="options2" v-model="selectValue2" placeholder="请选择" multiple @onOpenChange="onOpenChange" transfer></mj-select>
                    </div>
                    <mj-button type="primary" @click="demo" class="ml10">动态改变value</mj-button>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;div class="mb10">{selectValue2}&lt;/div>
                        &lt;mj-select :option="options2" v-model="selectValue2" placeholder="请选择" multiple @onOpenChange="onOpenChange">&lt;/mj-select>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                    options2: [{
                                        value: '莲雾',
                                        label: '莲雾'
                                    }, {
                                        value: '人参果',
                                        label: '人参果',
                                    }, {
                                        value: '哥布林',
                                        label: '哥布林'
                                    }, {
                                        value: '奇异果',
                                        label: '奇异果'
                                    }, {
                                        value: '榴莲',
                                        label: '榴莲'
                                    }],
                                    selectValue2: [],
                                }
                            },
                            methods: {
                                onOpenChange(v) {
                                    console.log('打开关闭状态:',v)
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="设置多选最大选择tag数量"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb10">已选值：{{selectValue3.value}}</div>
                <div style="width:300px;">
                    <mj-select :option="options3" show-search v-model="selectValue3.value" placeholder="请选择" multiple :max-tag-count="2"></mj-select>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-select :option="options3" v-model="selectValue3" placeholder="请选择" multiple :max-tag-count="2">&lt;/mj-select>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                    options3: [{
                                        value: '莲雾',
                                        label: '莲雾'
                                    }, {
                                        value: '人参果',
                                        label: '人参果',
                                    }, {
                                        value: '哥布林',
                                        label: '哥布林'
                                    }, {
                                        value: '奇异果',
                                        label: '奇异果'
                                    }, {
                                        value: '榴莲',
                                        label: '榴莲'
                                    }],
                                    selectValue3: [],
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="带搜索选项"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb5">已选值：{{selectValue5}}</div>
                <div class="flex">
                    <mj-select :option="options2" v-model="selectValue5" placeholder="请选择" :showSearch="true" searchPlaceholder="请输入搜索关键字" style="width:300px;"></mj-select>
                    <mj-button type="primary" class="ml10" @click="handler1">清空值</mj-button>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-select :option="options2" placeholder="请选择" :showSearch="true" searchPlaceholder="请输入搜索关键字">&lt;/mj-select>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="flex">
                    <div style="width:200px;">
                        <mj-select :option="options" v-model="selectValue1" size="large"></mj-select>
                    </div>
                    <div style="width:200px;margin:0 20px;">
                        <mj-select :option="options" v-model="selectValue1"></mj-select>
                    </div>
                    <div style="width:200px;">
                        <mj-select :option="options" v-model="selectValue1" size="small"></mj-select>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-select :option="options" v-model="selectValue1" size="large">&lt;/mj-select>
                        &lt;mj-select :option="options" v-model="selectValue1">&lt;/mj-select>
                        &lt;mj-select :option="options" v-model="selectValue1" size="small">&lt;/mj-select>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Select 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                    <td>指定选中项目的 value 值，可以使用 v-model 双向绑定数据。单选时只接受 String 或 Number，多选时只接受 Array</td>
                    <td>String | Number | Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>option</td>
                    <td>数据数组</td>
                    <td>Object</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>选择框默认文字</td>
                    <td>String</td>
                    <td>请选择</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>multiple</td>
                    <td>是否支持多选</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>showSearch</td>
                    <td>是否可搜索</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>searchPlaceholder</td>
                    <td>单选搜索框的placeholder，多选不设置</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>选择框大小，可选值为<code>large</code>、<code>small</code>、或者不填</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>max-tag-count</td>
                    <td>多选时最多显示多少个 tag</td>
                    <td>Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>transfer</td>
                    <td>是否将弹层放置于 body 内，当父层有overflow:hidden属性，不受父层的裁剪影响</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>transfer-class-name</td>
                    <td>开启 transfer 时，给浮层添加额外的 class 名称</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
        <mj-title type="h6" title="Select 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>on-change</td>
                    <td>选中的Option变化时触发</td>
                    <td>{label,value}</td>
                </tr>
                <tr>
                    <td>onOpenChange</td>
                    <td>下拉框展开收起时触发</td>
                    <td>true | false</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [],
                options2: [{
                    value: '1',
                    label: '莲雾'
                }, {
                    value: '2',
                    label: '人参果',
                }, {
                    value: '3',
                    label: '哥布林'
                }, {
                    value: '4',
                    label: '奇异果'
                }, {
                    value: '5',
                    label: '榴莲'
                }],
                selectValue1: '',
                selectValue2:['1','2','3'],
                onChangeText: '',
                options3: [{
                    value: '1',
                    label: '莲雾'
                }, {
                    value: '2',
                    label: '人参果',
                }, {
                    value: '3',
                    label: '哥布林'
                }, {
                    value: '4',
                    label: '奇异果'
                }, {
                    value: '5',
                    label: '榴莲'
                }],
                selectValue5:'1',
                selectValue3: {},
                selectDisabled:true,
                selectValue4: {
                    value:'16'
                }
            }
        },
        mounted() {
            this.options = [{
                    value: '1',
                    label: 'ROG MAXIMUS XII APEX'
                }, {
                    value: '2',
                    label: 'ROG CROSSHAIR VIII IMPACT',
                    disabled: true
                }, {
                    value: '3',
                    label: 'NVIDIA__NVIDIA P104-101 30.0.15.1295_显卡'
                }, {
                    value: '4',
                    label: 'NVIDIA__NVIDIA TITAN V 30.0.15.1295_显卡'
                }, {
                    value: '5',
                    label: 'NVIDIA__NVIDIA Quadro RTX 3000 30.0.15.1295_显卡'
                }, {
                    value: '6',
                    label: 'AMD AMD Audio CoProcessor 6.0.0.37 主板驱动 官方正式版 For Win10-64/win2008-64-r2 ',
                    disabled: true
                }, {
                    value: '7',
                    label: 'AMD AMD Audio CoProcessor 2.89.0.69 主板驱动 官方正式版 For win2008-64-r2 '
                }, {
                    value: '8',
                    label: 'Intel Intel(R) Wi-Fi 6 AX203 22.100.0.3 网卡驱动 官方正式版 For Win10-64/win2008-64-r2 '
                },{
                    value: '9',
                    label: 'NVIDIA__NVIDIA Quadro RTX 3000 30.0.15.1295_显卡'
                }, {
                    value: '10',
                    label: 'AMD AMD Audio CoProcessor 6.0.0.37 主板驱动 官方正式版 For Win10-64/win2008-64-r2 ',
                    disabled: true
                }, {
                    value: '11',
                    label: 'AMD AMD Audio CoProcessor 2.89.0.69 主板驱动 官方正式版 For win2008-64-r2 '
                }, {
                    value: '12',
                    label: 'Intel Intel(R) Wi-Fi 6 AX203 22.100.0.3 网卡驱动 官方正式版 For Win10-64/win2008-64-r2 '
                },{
                    value: '13',
                    label: 'NVIDIA__NVIDIA Quadro RTX 3000 30.0.15.1295_显卡'
                }, {
                    value: '14',
                    label: 'AMD AMD Audio CoProcessor 6.0.0.37 主板驱动 官方正式版 For Win10-64/win2008-64-r2 ',
                    disabled: true
                }, {
                    value: '15',
                    label: 'AMD AMD Audio CoProcessor 2.89.0.69 主板驱动 官方正式版 For win2008-64-r2 '
                }, {
                    value: '16',
                    label: 'Intel Intel(R) Wi-Fi 6 AX203 22.100.0.3 网卡驱动 官方正式版 For Win10-64/win2008-64-r2 '
                },{
                    value: '17',
                    label: 'NVIDIA__NVIDIA Quadro RTX 3000 30.0.15.1295_显卡'
                }, {
                    value: '18',
                    label: 'AMD AMD Audio CoProcessor 6.0.0.37 主板驱动 官方正式版 For Win10-64/win2008-64-r2 ',
                    disabled: true
                }, {
                    value: '19',
                    label: 'AMD AMD Audio CoProcessor 2.89.0.69 主板驱动 官方正式版 For win2008-64-r2 '
                }, {
                    value: '20',
                    label: 'Intel Intel(R) Wi-Fi 6 AX203 22.100.0.3 网卡驱动 官方正式版 For Win10-64/win2008-64-r2 '
                }]
        },
        methods: {
            demo() {
                this.selectValue2 = ['2']
            },
            onChange(item) {
                console.log(item)
            },
            onOpenChange(v) {
                console.log('打开关闭状态:',v)
            },
            load1() {
                this.selectValue4.value = ''
                this.options = [{
                    value: '1',
                    label: '莲雾'
                }, {
                    value: '2',
                    label: '人参果',
                }, {
                    value: '3',
                    label: '哥布林'
                }, {
                    value: '4',
                    label: '奇异果'
                }, {
                    value: '5',
                    label: '榴莲'
                }]
            },
            handler1() {
                this.selectValue5 = ''
            },
        },
    }
</script>
